<template>
    <div>
        <el-row>
            <!--<table>-->
                <!--<tr>-->
                    <!--<td>-->
                        <!--消费金额-->
                    <!--</td>-->
                    <!--<td>-->
                        <!--1200-->
                    <!--</td>-->
                <!--</tr>-->
                <!--<tr>-->
                    <!--<td>-->
                        <!--账户金额-->
                    <!--</td>-->
                    <!--<td>-->
                        <!--2800-->
                    <!--</td>-->
                <!--</tr>-->
            <!--</table>-->

        </el-row>
        <el-row v-for="(item,i) in order.detailList">
            <el-col :span="11" class="alignRight">
                {{item.dishesMainId}}:
            </el-col>
            <el-col v-if="item.number>1" :span="13" class="alignLeft">
                {{item.price}}x{{item.number}}
            </el-col>
            <el-col v-else :span="13" class="alignLeft">
                {{item.price}}
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px" class="alignRight">
            <el-col class="alignRight" :span="11">
                消费金额：
            </el-col>
            <el-col class="alignLeft" :span="13">
                ￥{{order.totalPrice}}
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px" class="alignRight">
        <el-col class="alignRight" :span="11">
            账户余额：
        </el-col>
        <el-col class="alignLeft" :span="13">
            ￥{{order.totalPrice}}
        </el-col>
    </el-row>
        <el-row v-if="this.$store.state.money<this.$store.state.totalPrice" style="margin-top: 50px" >
            <el-button type="primary" class="buttonSize"
                       @click="invoTableSelect">充值
            </el-button>
        </el-row>
        <el-row v-else style="margin-top: 50px;text-align: center" >
            <el-button type="primary" class="buttonSize"
                       @click="invoBuyOrder">结账
            </el-button>
        </el-row>
    </div>
</template>

<script>
    import invoiceStore from '../../store/modules/frontStore/invoiceStore'
    export default {
        name: "invoBuyOrder",
        computed:{
          order(){
              let orderData = [];
              // for (let item of this.$store.state) {
              //     orderData.push(item)
              // }
              return orderData
          }
        },
        data(){
            return{
                number:0,

            }
        },
        created(){
            this.number=this.$store.state.number
        },
        methods:{
            openSeccessAlert() {
                this.$message({
                    message: '支付成功',
                    center: true,
                    type:'success',
                });
            },
            invoBuyOrder(){
                // console.log(this.number);
                let obj={number:this.$store.state.number,totalPrice:this.$store.state.totalPrice}
                invoiceStore.dispatch('invoBuyOrderSt',obj).then(res=>{
                    if (res.Status === "success") {
                        console.log(res.Text);
                        this.openSeccessAlert()
                        // this.$router.push('/front/invoicing/invoBuyOrder')
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
    .alignLeft {
        text-align: left;
    }

    .alignRight {
        text-align: right;
    }

    .myInput {
        width: 150px;
    }

    .buttonSize {
        height: 30px;
        width: 100px;
        padding: 0;
    }
</style>